<template>
	<div class="article-lists">
		<div>
            <router-link
                v-perms="['news/save']"
                :to="{path: getRoutePath('news/details')}"
            >
                <el-button type="primary" class="mb-4">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    新增资讯
                </el-button>
            </router-link>
        </div>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" prop="order_id" min-width="90" />
				<el-table-column label="标题" prop="title" min-width="180" />
                <el-table-column label="作者" prop="author" min-width="180" />
                <el-table-column label="创建时间" prop="show_time" min-width="180" />
				<el-table-column label="资讯链接" prop="show_time" min-width="240" >
					<template #default="{ row }">
						<el-link type="primary" :underline="false" v-copy="`${baseUrl}h5/#/information?id=${row.id}`">{{`${baseUrl}h5/#/information?id=${row.id}`}}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
                        <el-button v-perms="['user.integral/setStatus']" type="danger" link @click="handleDetele(row.id)">删除</el-button>
                        <router-link
                            v-perms="['news/save']"
                            :to="{path: getRoutePath('news/details'), query: {id: row.id}}"
                        >
                            <el-link class="ml-2.5" type="primary" :underline="false">详情</el-link>
                        </router-link>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="news_lists">
	import { news_lists, news_delete } from '@/api/operation';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import {getRoutePath} from '@/router'
	const queryParams = reactive({})

	const baseUrl = `${import.meta.env.VITE_URL_LINK || ''}`

    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: news_lists,
		params: queryParams
	})
    
	//删除
	const handleDetele = async (id: number) => {
		try{
			await feedback.confirm('确认删除该资讯', '删除','error')
			await news_delete({id});
			getLists();
		}catch(error){
			console.log(error)
		}
	}
    
	getLists()
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}

</style>